<script setup>
import {reactive} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 管理员数据
 *
 * @type {UnwrapNestedRefs<{form: {accountPhoto: string, accountBrowser: string, accountIPAddress: string, accountEmail: string, accountPhone: string, accountCreateTime: string, accountNo: string, accountRoleName: string, accountRoleNo: string, accountCountNumber: string, accountCreateMan: string, accountOSName: string}}>}
 */
const accountData = reactive({
    form: {
        accountNo: '',
        accountRoleNo: '',
        accountRoleName: '',
        accountPhone: '',
        accountEmail: '',
        accountPhoto: account.accountPhoto,
        accountCreateMan: '',
        accountCreateTime: '',
        accountBrowser: '',
        accountIPAddress: '',
        accountOSName: '',
        accountCountNumber: '',
    }
})


/**
 * 管理员数据
 *
 * @type {UnwrapNestedRefs<{form: {accountEmail: string, accountPhone: string, accountNo: string}}>}
 */
const accountNewData = reactive({
    form: {
        accountNo: '',
        accountPhone: '',
        accountEmail: '',
    }
})

/**
 * 加载个人信息
 */
const loadAccount = () => {
    request.get(`/api/admin/admin-info/${account.accountNo}`).then(res => {
        if (res.code === "200") {
            if (res.data === null) {
                accountData.form = {}
            } else {
                accountData.form = res.data
            }
        }
    })
}
loadAccount()

/**
 * 更新个人信息
 */
const updateInfo = () => {
    if (account.accountRoleName === 'visitor-admin') {
        ElMessage.info("游客-管理员仅可以查看信息")
    } else {
        accountNewData.form.accountNo = accountData.form.accountNo
        accountNewData.form.accountPhone = accountData.form.accountPhone
        accountNewData.form.accountEmail = accountData.form.accountEmail
        request.put(`/api/admin/update-info`, accountNewData.form).then(res => {
            if (res.code === "200") {
                loadAccount()
                ElMessage.success("修改成功")
            } else {
                ElMessage.error(res.msg)
            }
        })
    }
}

/**
 * 上传成功
 *
 * @param res 头像
 */
const uploadSuccess = (res) => {
    ElMessage.success("上传成功")
    account.accountPhoto = res.data
}

/**
 * 获取账号
 */
const getAccountNo = () => {
    if (account.accountRoleName === 'visitor-admin') {
        ElMessage.info("游客-管理员仅可以查看信息")
    } else {
        request.get(`/files/get-account-no/${account.accountNo}`)
    }
}
</script>

<template>
    <div>
        <div class="card" style="width: 50%; padding: 40px;">
            <el-form :model="accountData.form" label-width="100px" label-position="center"
                     style="padding-right: 40px">
                <el-form-item label="头像">
                    <el-image style="width: 150px; height: 150px"
                              :src="account.accountPhoto"/>
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9090/files/upload"
                            :show-file-list="false"
                            list-type="picture"
                            :on-success="uploadSuccess">
                        <div style="margin-top: 220px; margin-left: -200px"
                             v-if="account.accountRoleName === 'system-admin'">
                            <el-button @click="getAccountNo" type="primary" size="middle" round>修改头像</el-button>
                        </div>
                    </el-upload>
                    <div style="margin-top: 220px; margin-left: -150px"
                         v-if="account.accountRoleName === 'visitor-admin'">
                        <el-button @click="getAccountNo" type="primary" size="middle" round>修改头像</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="账号" prop="accountNo">
                    <el-input style="width: 400px" v-model="accountData.form.accountNo" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="手机号" prop="accountPhone">
                    <el-input v-model="accountData.form.accountPhone" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="邮箱" prop="accountEmail">
                    <el-input v-model="accountData.form.accountEmail" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <div>
                <el-button @click="updateInfo" type="primary"
                           style="margin-bottom: 10px;margin-left: 350px">修改信息
                </el-button>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>